(function($){
  var defaults={
  	'container':'#container',
  	'content':'#content',
  	'control':'#control',
  	'first':'#first',
  	'next':'#next',
  	'prev':'#prev',
  	'last':'#last',
  	'page_index':'#page-index',
  	'index_account':7,  //底部显示的页数
  	'message_account':3,
  	'url':'js/data.json'
  }
  var opts={};

  //要用到的变量
  var container,content,control,first,next,prev,last,page_index,num,url,message_account,index_account;
  //页数
  var len=0;
  //当前页
  var currIndex=1;
  
  $.fn.pagination=function(options){
      opts=$.extend({},defaults,options||{});
      init();//得到Dom
      render();//初始渲染
  }
  //实例defaults对象的各参数
  function init(){

  	 container=$(opts.container);
     content=$(opts.content);
     control=$(opts.control);
     first=$(opts.first);
     next=$(opts.next);
     prev=$(opts.prev);
     last=$(opts.last);
     page_index=$(opts.page_index);
     num=opts.num;
     url=opts.url;
     message_account=opts.message_account;
     index_account=opts.index_account;
  }
  //网页加载后渲染
  function render(){
  	 renderContent();
  	 renderControl();
  }
  //渲染分页内容部分
  function renderContent(){
    /* var xhr=new XMLHttpRequest()||new ActiveXObject('Microsoft.XMLHTTP');
     xhr.onreadystatechange=function(){
              if(xhr.readyState==4){
                var datas=new Array(xhr.responseText);
                alert(datas.length)
              
              }
     }
     xhr.open("GET",url,true);
     xhr.send(null);*/
    $.ajaxSettings.async=false;
    $.getJSON(url,function(data){
       len=Math.ceil(data.length/message_account);  //计算多少页
       $.each(data,function(index,obj){
        
         if(index==message_account*(currIndex-1)){
              content.empty();
              for(var i=0;i<message_account&&index+i<data.length;i++){
                     var $div=$("<div></div>");
                     content.append($div);
                     $div.append("<img src='"+data[index+i].img+"'/>");
                     $div.append("<p>"+data[index+i].name+"</p>");
              }
              
            
         }
         
         
         });
  
    });

  }
  //渲染分页控制器
  function renderControl(){
      index_account=index_account>len?len:index_account;
      page_index.append('<a class="active" data-page="1" href="#">1</a>');
      for(var i=2;i<=index_account;i++){
        page_index.append('<a href="#" data-page='+i+'>'+i+'</a>');
      }
      
  
      function changeActiveIndex(name){
        //name格式为i
          if(name==1){
            last.removeClass("disable");
            next.removeClass("disable");
            first.addClass('disable');
            prev.addClass('disable');
          }else if(name==len){
            first.removeClass("disable");
            prev.removeClass("disable");
            last.addClass("disable");
            next.addClass("disable");
          }else{
            first.removeClass("disable");
            prev.removeClass("disable");
            last.removeClass("disable");
            next.removeClass("disable");
          }
          page_index.empty();
          var leftIndex=name-Math.ceil(index_account/2-1);//最左边的index;
          var rightIndex=leftIndex+index_account-1;//最右边的index;
          var start;//真正要渲染的最左边的开始
          //判断
          if(leftIndex<1){
            start=1;
          }else if(rightIndex>len){
            start=len-index_account+1;
          }else{
            start=leftIndex;
          }
          for(var i=0;i<index_account;i++){
            page_index.append('<a href="#" data-page='+(start+i)+'>'+(start+i)+'</a>');
          }
          currIndex=name;
          $(opts.page_index+">"+"a[data-page="+name+"]").addClass("active");

          addPageIndexEvent();
      }
      //首页
      first.on('click',function(){
        event.preventDefault();
        currIndex=1;
        renderContent();
        changeActiveIndex(currIndex);
      });
      //末页
      last.on('click',function(){
        event.preventDefault();
        currIndex=len;
        renderContent();
        changeActiveIndex(currIndex);
      });
      //上一页
      prev.on('click',function(){
           event.preventDefault();
           if(currIndex>1){
             currIndex--;
           }
           renderContent();
           changeActiveIndex(currIndex)
      });
     //下一页
      next.on('click',function(){
          event.preventDefault();
          if(currIndex<len){
            currIndex++;
          }
           renderContent();
           changeActiveIndex(currIndex)
      });
    //点击具体哪页
    function addPageIndexEvent(){
      $(opts.page_index+">a").on('click',function(){
           event.preventDefault();
           var index=$(this).data("page");
           currIndex=index;
           renderContent(url);
           changeActiveIndex(index);
      })
    }
    addPageIndexEvent();
  }
})(jQuery);